<div ng-controller="AccordionDemoCtrl">
  <label class="checkbox">
    <input type="checkbox" ng-model="oneAtATime">
    Open only one at a time
  </label>
  {{groups.length}}
  
  
  {{groups[0]}}
  <accordion close-others="oneAtATime">
    <accordion-group is-open="jobsDownloadingFiles[0].status">
      <accordion-heading>
        {{jobsDownloadingFiles[0].title}}<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': jobsDownloadingFiles[0].status, 'glyphicon-chevron-right': !jobsDownloadingFiles[0].status}"></i>
      </accordion-heading>
      <table ng-table="tableParams" class="table">
        <tr ng-repeat="jobInQueue in $data">
          <td data-title="'Job'">
              <span>{{jobInQueue.jobName}}</span>
          </td>
          <td data-title="'Prority'" width="200">
              <span ng-if="!jobInQueue.$edit">{{jobInQueue.priority}}</span>
              <div ng-if="jobInQueue.$edit"><input class="form-control" type="number" ng-model="jobInQueue.priority" /></div>
          </td>
          <td data-title="'Actions'" width="200">
              <a ng-if="!jobInQueue.$edit" href="" class="btn btn-info btn-xs" ng-click="jobInQueue.$edit = true">Edit</a>
              <a ng-if="!jobInQueue.$edit" href="" class="btn btn-warning btn-xs" ng-click="jobInQueue.$edit = true">Hold</a>
              <a ng-if="jobInQueue.$edit" href="" class="btn btn-primary btn-xs" ng-click="jobInQueue.$edit = false">Save</a>
              <a ng-if="jobInQueue.$edit" href="" class="btn btn-danger btn-xs" ng-click="jobInQueue.$edit = false">Delete</a>
          </td>
        </tr>
      </table>
    </accordion-group>

    <accordion-group is-open="jobsWaitingToBeLoaded[0].status">
      <accordion-heading>
        {{jobsWaitingToBeLoaded[0].title}}<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': jobsWaitingToBeLoaded[0].status, 'glyphicon-chevron-right': !jobsWaitingToBeLoaded[0].status}"></i>
      </accordion-heading>
      <table ng-table="tableParams2" class="table">
        <tr ng-repeat="jobInQueue in $data">
          <td data-title="'Job'">
              <span>{{jobInQueue.jobName}}</span>
          </td>
          <td data-title="'Prority'" width="200">
              <span ng-if="!jobInQueue.$edit">{{jobInQueue.priority}}</span>
              <div ng-if="jobInQueue.$edit"><input class="form-control" type="number" ng-model="jobInQueue.priority" /></div>
          </td>
          <td data-title="'Actions'" width="200">
              <a ng-if="!jobInQueue.$edit" href="" class="btn btn-default btn-xs" ng-click="jobInQueue.$edit = true">Edit</a>
              <a ng-if="jobInQueue.$edit" href="" class="btn btn-primary btn-xs" ng-click="jobInQueue.$edit = false">Save</a>
          </td>
        </tr>
      </table>
    </accordion-group>

    <accordion-group is-open="jobsCurrentlyRunning[0].status">
      <accordion-heading>
        {{jobsCurrentlyRunning[0].title}}<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': jobsCurrentlyRunning[0].status, 'glyphicon-chevron-right': !jobsCurrentlyRunning[0].status}"></i>
      </accordion-heading>
      <table ng-table="tableParams3" class="table">
        <tr ng-repeat="jobInQueue in $data">
          <td data-title="'Job'">
              <span>{{jobInQueue.jobName}}</span>
          </td>
          <td data-title="'Prority'" width="200">
              <span ng-if="!jobInQueue.$edit">{{jobInQueue.priority}}</span>
              <div ng-if="jobInQueue.$edit"><input class="form-control" type="number" ng-model="jobInQueue.priority" /></div>
          </td>
          <td data-title="'Actions'" width="200">
              <a ng-if="!jobInQueue.$edit" href="" class="btn btn-default btn-xs" ng-click="jobInQueue.$edit = true">Edit</a>
              <a ng-if="jobInQueue.$edit" href="" class="btn btn-primary btn-xs" ng-click="jobInQueue.$edit = false">Save</a>
          </td>
        </tr>
      </table>
    </accordion-group>

    <accordion-group is-open="jobsBeingHeld[0].status">
      <accordion-heading>
        {{jobsBeingHeld[0].title}}<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': jobsBeingHeld[0].status, 'glyphicon-chevron-right': !jobsBeingHeld[0].status}"></i>
      </accordion-heading>
      <table ng-table="tableParams4" class="table">
        <tr ng-repeat="jobInQueue in $data">
          <td data-title="'Job'">
              <span>{{jobInQueue.jobName}}</span>
          </td>
          <td data-title="'Prority'" width="200">
              <span ng-if="!jobInQueue.$edit">{{jobInQueue.priority}}</span>
              <div ng-if="jobInQueue.$edit"><input class="form-control" type="number" ng-model="jobInQueue.priority" /></div>
          </td>
          <td data-title="'Actions'" width="200">
              <a ng-if="!jobInQueue.$edit" href="" class="btn btn-default btn-xs" ng-click="jobInQueue.$edit = true">Edit</a>
              <a ng-if="jobInQueue.$edit" href="" class="btn btn-primary btn-xs" ng-click="jobInQueue.$edit = false">Save</a>
          </td>
        </tr>
      </table>
    </accordion-group>    
  </accordion>
</div>